import React, { Component } from "react";
import { View, Text, StyleSheet, Image, TouchableWithoutFeedback } from "react-native";
import { width } from "../../util/apdater_util";
import PropTypes from "prop-types";
import img_arr from "../../util/img_arr";

export default class CommentCell extends Component{
  constructor(props) {
    super(props);
  }
  static propTypes={
    comment:PropTypes.object,
    cellClick:PropTypes.func,
    like:PropTypes.func
  }
  static defaultProps={
    comment:{},
    cellClick:()=>{},
    like:()=>{}
  }
  _renderCommentCell=(info)=>{
    return (
      <TouchableWithoutFeedback onPress={this.props.cellClick.bind(this,this.props.comment)}>
        <View style={styles.contributeCell}>
          <Image style={styles.portrait} source={{uri:this.props.comment.avatar}}></Image>
          <View  style={[styles.contributeInfo,{flex:1}]}>
            <View style={styles.commentTitleBox}>
              <Text style={styles.nickName}>{this.props.comment.nickName}</Text>
              <View style={[styles.favorBox,{marginRight:14}]}>
                <Text style={{color:'#1C1C1C',fontSize:11,marginRight:5}}>{this.props.comment.likeNum}</Text>
                <TouchableWithoutFeedback onPress={this.props.like.bind(this,this.props.comment)}>
                  <Image style={{width:14,height:14}} source={this.props.comment.isLike==1?img_arr.icon_favor_selected:img_arr.icon_favor_normal}></Image>
                </TouchableWithoutFeedback>
              </View>
            </View>
            <Text style={[styles.contributeDes,{marginRight:14}]}>{this.props.comment.content}</Text>
            {this.props.comment.trendComments&&this.props.comment.trendComments.length>0?(
              <View style={styles.comment}>
                {this.props.comment.trendComments.map((child,childIndex)=>{
                  if(child.commentId==child.pid&&childIndex<2){
                    return <Text style={[styles.commentDes,styles.commentItem]} key={'childIndex'+childIndex}><Text style={styles.name}>{child.nickName}：</Text>{child.replyContent}</Text>
                  }
                  else if(child.commentId!=child.pid&&childIndex<2) {
                    return <Text style={[styles.commentDes,styles.commentItem]} key={'childIndex'+childIndex}><Text style={styles.name}>{child.nickName}</Text><Text style={[styles.commentDes,styles.replayTitle]}> 回复 </Text><Text style={styles.name}>{child.replyNickName}：</Text>{child.replyContent}</Text>
                  }
                  else return null
                })}
                {this.props.comment.trendComments.length>2?(
                  <Text style={styles.replay}>共{this.props.comment.trendComments.length}条回复></Text>
                ):null}
              </View>
            ):null}
            <Text style={styles.time}>{this.props.comment.displayTime}</Text>
          </View>
        </View>
      </TouchableWithoutFeedback>
    )
  }
  render(){
    return(
      <View>
        {this._renderCommentCell()}
      </View>
    )
  }
}

const styles=StyleSheet.create({
  /**contributeCell*/
  contributeCell:{
    flexDirection:'row',
    justifyContent:'flex-start',
    paddingTop:19,
    paddingLeft:15
  },
  contributeInfo:{
    marginLeft:15,
    borderBottomWidth:1,
    borderBottomColor:'#F8F8F8',
    paddingBottom: 17,
    borderBottomStyle:'solid'
  },
  portrait:{
    width:30,
    height:30,
    borderRadius:15
  },
  nickName:{
    color:'#1C1C1C',
    fontSize:13,
    fontWeight:'500'
  },
  contributeDes:{
    color:'#1C1C1C',
    fontSize:15,
    marginTop:0
  },
  contributeImgBox:{
    marginTop:12,
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center'
  },
  contributeImg:{
    width:(width-85)/3.0,
    height:(width-85)/3.0,
    marginRight:5,
    borderRadius:5
  },
  contributeFooter:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    marginTop:17
  },
  footerTitle:{
    color:'#C5C5C5',
    fontSize:10
  },
  blank:{
    height:100,
    width:'100%',
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center'
  },
  passwordIcon:{
    width:30,
    height:30
  },
  blankTitle:{
    color:'#959595',
    fontSize:15,
    marginLeft:11
  },
  favorBox:{
    flexDirection:'row',
    justifyContent:'flex-end',
    alignItems:'center'
  },
  comment:{
    backgroundColor:'#F6F6F8',
    paddingHorizontal:10,
    paddingVertical: 12,
    marginTop:8,
    marginRight:15,
    borderRadius:2
  },
  name:{
    color:'#262626',
    fontSize:12,
    fontWeight:'500'
  },
  commentDes:{
    color:'#565656',
    fontSize:12
  },
  commentItem:{
    marginBottom: 10
  },
  replay:{
    color:'#3CA1FD',
    fontSize:11
  },
  replayTitle:{
    color:'#565656',
    fontSize:11,
    marginLeft:10,
    marginRight:10
  },
  time:{
    color:'#C5C5C5',
    fontSize:10,
    marginTop:16
  }
})
